// import { Swiper} from "./swiper-bundle.esm.browser.min.js";
import $ from "./jquery.js" ;
import cookie from "./cookie.js" ;
// $(window).scroll(function(){
//     //console.log($(this).height());
    
//      let o=$(this).outerHeight();
     
//     // console.log($(this).innerHeight());
//     //console.log($(this).height());
//     // $('.jiesuan').css('top',o);
    
// });
//let o=0,xtx,xtw,iui=0,oll=0,wow=0;

 //========================================
 let shop = cookie.get('shop');

shop = JSON.parse(shop);

let idList = shop.map(el => el.id).join();

$.ajax({
    type: "get",
    url: "../interface/shop.php",
    data: { idList },
    dataType: "json"
}).then(res => {
    let template = '';
    res.forEach(el => {
        let o0o=JSON.parse(el.picture);
        //console.log(o0o)
        let owo=JSON.parse(el.type);
       // console.log(owo[0].type[0])
        let pic = JSON.parse(el.picture);

        let currentData = shop.filter(elm => elm.id === el.id);

       
    template+=`<div class="ww center">
    <div class="xtx">
      <i pop="-1"  data-i="0">✓</i>
    </div>
    <div class="txt">
      <a href="javascript:;"><img src="${o0o[2].src}" alt="" /></a>
    </div>
    <div class="wtw">
      <a href="javascript:;">${el.title} ${owo[0].type[0]} ${owo[0].color[0]}</a>
    </div>
    <div class="www">${el.price}元</div>
    <div class="wqq">
      <p>
        <span class="jian">-</span><input type="text" value="${currentData[0].num}" data-index="${el.id}"/><span
          class="jia"
          >+</span
        >
      </p>
    </div>
    <div class="tyy">${el.price*currentData[0].num}元</div>
    <div class="xtxx">
      <u data-id="${el.id}" class="w2w2r">x</u>
    </div>
  </div>`;
    });
    let uiu=$('.main').html();
    //console.log(uiu+=template);
    console.log(template);
    $('.main').html(uiu+=template);
//xtx();
    
//=================================================================
const wt=/[^0-9]/g;
$('.xtxw').on('mouseenter',function(){
    //console.log(1);
    $(this).children('h6').addClass('oio');
})
$('#re6').on('mouseenter',function(){
    
    $('#r4r').addClass('show')
  });
  $('#re6').on('mouseleave',function(){
    $('#r4r').removeClass('show')
  })


// $('.ww').find('i').on('click',function(){
//     if($('.all').find('i').attr('pop')==1){
//         iui=0;
//         $('.ww').find('input').each((i,e)=>{
//             iui+=Number($(e).val()) 
//              return iui;
//         })
//         $('.main1').find('.rwe').text(`${iui}`);
       
//     }
//      //rt();
//    if($(this).attr('pop')==1){
    
//     o--;
//     $(this).removeClass('pol').attr('pop',-1);
    
//    }else{
//     o++;
//     $(this).addClass('pol').attr('pop',1); 
//    }
//    iui+=$(this).attr('pop')*Number($(this).parents('.ww').find('input').val());
//    oll+=$(this).attr('pop')*parseInt($(this).parents('.ww').find('.www').text());
//    $('.main1').find('.rwe').text(`${iui}`);
//    $('.main1').find('.wttw').text(`${oll}`);
//    //console.log($(this).parents('.ww').find(''))
//    //console.log(o);
//   // console.log(iui);
//  if($('.ww').find('i').length==o){
//      $('.all').find('i').addClass('pol').attr('pop',1);
//  }else{
//     $('.all').find('i').removeClass('pol').attr('pop',-1);
    
//     // rt();
//     // iui=0;
//  }
 
// })

// $('.all').find('i').click(function(){
//     if($(this).attr('pop')==-1){
//         //iui=0;
//         //$('.main1').find('.rwe').text(`${iui}`);
//         o=$('.ww').find('i').length;
//         $('.main').find('i').addClass('pol').attr('pop',1);
//     }else{
//         o=0;
//         $('.main').find('i').removeClass('pol').attr('pop',-1);
//     }
    
// })
// // $('.all').children('i').click(function(){
// //      let w=1;
    
// //     function we(){
// //         o=$('.ww').find('i').each((i,e)=>{
// //          w=w*Number($(e).attr('pop'))
// //          console.log(w);
// //          return w;    
// //      })
     
// //      }
// //     we();
// //     if(o){
// //         $('.all').find('i').removeClass('pol').attr('pop',0);
// //        $('.main').find('i').removeClass('pol').attr('pop',0);
// //     }else{
// //        $('.main').find('i').addClass('pol').attr('pop',1); 
// //     }  
   
// // })
// $('.ww').find('.jia').click(function(){
//     let po=Number($(this).siblings('input').val());
//     po++;
//     $(this).siblings('input').val(`${po}`)
//    //console.log($(this).siblings('input').val());
//    xtx=parseInt($(this).parents('.wqq').siblings('.www').text())*$(this).siblings('input').val()
//    $(this).parents('.wqq').siblings('.tyy').text(`${xtx}元`)
// //    iui+=$(this).parents('.ww').find('i').attr('pop')*Number($(this).parents('.ww').find('input').val());
// //    $('.main1').find('.rwe').text(`${iui}`);
// //console.log($(this).parents('.ww').find('i').attr('pop'))
// if($(this).parents('.ww').find('i').attr('pop')==-1){
  
// }else{
//        iui++;
//    $('.main1').find('.rwe').text(`${iui}`);
// //console.log($(this).parents('.ww').find('i').attr('pop'))
// }
// });
// $('.ww').find('.jian').click(function(){
//     let po=Number($(this).siblings('input').val());
//     po--;
//     if(po<=1){
//         po=1;
//         $('.ouo').fadeIn(500);
//     }
//     $(this).siblings('input').val(`${po}`);
//     //console.log(1);
//    //console.log($(this).siblings('input').val());
//    //console.log($(this).parents('.wqq').siblings('.www').text());
//    //console.log(parseInt($(this).parents('.wqq').siblings('.www').text()));
//    xtx=parseInt($(this).parents('.wqq').siblings('.www').text())*$(this).siblings('input').val()
//    $(this).parents('.wqq').siblings('.tyy').text(`${xtx}元`)
//    if($(this).parents('.ww').find('i').attr('pop')==-1){
  
// }else{
//        iui--;
//    $('.main1').find('.rwe').text(`${iui}`);
// //console.log($(this).parents('.ww').find('i').attr('pop'))
// }
   
// })
// //==================================
function debounce(callback, delay) {
    let timer = null; 

    return function(ev) {
        if (timer) { 
            clearTimeout(timer);
        }

        timer = setTimeout(() => {
            callback.call(this, ev);
        }, delay);
    }
}



//
$('#rtrrt').find('span').click(function(){
    $("#rtrrt").fadeOut(500);
})
$('#rtrrt').find('.wtx').click(function(){
    $("#rtrrt").fadeOut(500);
})

//=============================================
let oo=0,zs=0,zjg=0,xtx1,xtw,w52,s52;
//=============================================
$('.all').find('i').click(function(){
    if($(this).attr('pop')==-1){
        $(this).attr('pop',1);
        $(this).attr('data-i',1);
        $('.ww').find('i').attr('pop',1);
        $('.ww').find('i').attr('data-i',1);
        $(this).addClass('pol');
        $('.ww').find('i').addClass('pol');
    }else{
        $(this).attr('pop',-1);
        $(this).attr('data-i',0);
        $('.ww').find('i').attr('pop',-1);
        $('.ww').find('i').attr('data-i',0);
        $(this).removeClass('pol');
        $('.ww').find('i').removeClass('pol');
    }
    xtx();
});
//==============================================
$('.ww').find('i').click(function(){
    if($(this).attr('pop')==-1){
        $(this).attr('pop',1);
        $(this).attr('data-i',1);
        $(this).addClass('pol');
    }else{
        $(this).attr('pop',-1);
        $(this).attr('data-i',0);
        $(this).removeClass('pol'); 
    }
    $('.ww').find('i').each((i,e)=>{
        oo+=parseInt($(e).attr('pop'));
        return oo;
    })
    // console.log(oo);
    // console.log($('.ww').find('i').length);
    if(oo==$('.ww').find('i').length){
        $('.all').find('i').attr('pop',1);
        $('.all').find('i').attr('data-i',1);
        $('.all').find('i').addClass('pol');
    }else{
        $('.all').find('i').attr('pop',-1);
        $('.all').find('i').attr('data-i',0);
        $('.all').find('i').removeClass('pol');  
    }
    xtx();
    oo=0;
})
//========================================================
$('.ww').find('.jia').click(function(){
    let po=Number($(this).siblings('input').val());
    po++;
    addItem($(this).siblings('input').attr('data-index'),1)
    $(this).siblings('input').val(`${po}`)
    xtx1=parseInt($(this).parents('.wqq').siblings('.www').text())*$(this).siblings('input').val();
   $(this).parents('.wqq').siblings('.tyy').text(`${xtx1}元`)
//    iui+=$(this).parents('.ww').find('i').attr('pop')*Number($(this).parents('.ww').find('input').val());
//    $('.main1').find('.rwe').text(`${iui}`);
//console.log($(this).parents('.ww').find('i').attr('pop'))
// if($(this).parents('.ww').find('i').attr('pop')==-1){
  
// }else{
//        //iui++;
//   // $('.main1').find('.rwe').text(`${iui}`);
// //console.log($(this).parents('.ww').find('i').attr('pop'))
// }
xtx();
});
//========================================================
$('.ww').find('.jian').click(function(){
    let po=Number($(this).siblings('input').val());
    po--;
    ////
    ///
    ///
    ////
    
    if(po<=1){
        po=1;
        $('.ouo').fadeIn(500);
        addItem($(this).siblings('input').attr('data-index'),0)
    }else{
        addItem($(this).siblings('input').attr('data-index'),-1)
    }
    $(this).siblings('input').val(`${po}`);
    //console.log(1);
   //console.log($(this).siblings('input').val());
   //console.log($(this).parents('.wqq').siblings('.www').text());
   //console.log(parseInt($(this).parents('.wqq').siblings('.www').text()));
   ///====================
   
   //=====================
   xtx1=parseInt($(this).parents('.wqq').siblings('.www').text())*$(this).siblings('input').val()
   $(this).parents('.wqq').siblings('.tyy').text(`${xtx1}元`)
   xtx(); 
})
//========================================================
$('.ww').find('input').on('input',debounce(function (){
    if(isNaN(Number($(this).val()))||$(this).val()==''){
        $('.yuy').fadeIn(500);
        $(this).val(1);
        xtx1=parseInt($(this).parents('.wqq').siblings('.www').text())*$(this).val()
        $(this).parents('.wqq').siblings('.tyy').text(`${xtx1}元`)
    }else if(Number($(this).val())<=0){ 
        $('.ouo').fadeIn(500);
        $(this).val(1);
        xtx1=parseInt($(this).parents('.wqq').siblings('.www').text())*$(this).val()
        $(this).parents('.wqq').siblings('.tyy').text(`${xtx1}元`)
    }
    else{
        xtw=parseInt($(this).val())
        $(this).val(`${xtw}`);
        xtx1=parseInt($(this).parents('.wqq').siblings('.www').text())*xtw
        $(this).parents('.wqq').siblings('.tyy').text(`${xtx1}元`)
    }
    xtx()
    },800))
    $('.yuy').find('span').click(function(){
        $(".yuy").fadeOut(500);
    })
    $('.yuy').find('.wtx').click(function(){
        $(".yuy").fadeOut(500);
    })
//========================================================
function xtx(){
    $('.ww').find('input').each((i,e)=>{
       // console.log($(e).parents('.ww').find('i').attr('data-i'))
       console.log($(e).attr('data-index'))
       console.log($(e).val())
       
      // cookie.set($(e).attr('data-index'),$(e).val())
       //console.log($(e).val());
       zs+=parseInt($(e).parents('.ww').find('i').attr('data-i'))*parseInt($(e).val());
      return zs;
    })
    $('.rwe').text(`${zs}`);
    zs=0;
    $('.tyy').each((i,e)=>{
        console.log($(e).text());
        zjg+=parseInt($(e).text())*parseInt($(e).parents('.ww').find('i').attr('data-i'));
        return zjg;
    })
    $('.xwt1').text(`${zjg}`);
    zjg=0;
    if($('.xwt1').text()!=0){
        $('.xt12').css('display','none');
        $('.w1q').addClass('iwi');
    }else{
        $('.xt12').css('display','block') ;
        $('.w1q').removeClass('iwi');
    }
}
 xtx();
  $('.w1q').click(function(){
      if($('.rwe').text()==0){
          $('.w1q').toggleClass('opopo');
      }
  })
  //============================================
  //============================================
  //-=-=-=-=-==--=-=-=-=-----=-=---=--=--=-=-
//   $('.ww').find('u').click(function(){
    $('.w2w2r').click(function(){
    $('.ws').fadeIn(500);
    let that=this;
    $('.wtxe').click(function(){
        //==========================
        let shop = cookie.get('shop');

        shop = JSON.parse(shop);
    let result = shop.filter(el => el.id != $(that).attr('data-id'));
   
    cookie.set('shop', JSON.stringify(result));









    //location.reload();
        //==========================
     $(that).parents('.ww').remove();
     $('.ws').fadeOut(500);
  if($(that).parents('.ww').find('i').attr('pop')==1){  w52= parseInt($('.rwe').text())-parseInt($(that).parents('.ww').find('input').val());
    s52= parseInt($('.xwt1').text())-parseInt($(that).parents('.ww').find('.tyy').text());
    $('.rwe').text(`${w52}`);
    $('.xwt1').text(`${s52}`);}
 })
 $('.wsw').click(function(){
     
     $('.ws').fadeOut(500);
 })
 $('.xtwxtw').click(function(){
    
     $('.ws').fadeOut(500);
 })
 })
//===========================================================

// $('.w2w2r').on('click', function () {
//     let result = shop.filter(el => el.id != $(this).attr('data-id'));
//     cookie.set('shop', JSON.stringify(result));
//     $(this).parent().parent().remove();

// });
//==============
// let result
// $('.w2w2r').on('click', function () {
//     result = shop.filter(el => el.id != $(this).attr('data-id'));
//     cookie.set('shop', JSON.stringify(result));
//     $(this).parent().parent().remove();
//     location.reload();

// });
//==========

}).catch(xhr => {
    console.log(xhr);
});
///////////////////////////////////////////
function addItem(id, num) {
    let product = { id, num };
  
    // console.log(product);
  
    let shop = cookie.get('shop'); // 获取cookie中的shop
  
  
    if (shop) { // 判断shop已有数据
        shop = JSON.parse(shop); // shop 字符串转数组
  
        // 需要判断当前的商品再shop中是否已存在 如果存在则修改数量 不存在则添加
        if (shop.some(el => el.id === id)) { // 判断当前商品存在
            let index = shop.findIndex(elm => elm.id === id); // 找到商品的索引
            let count = parseInt(shop[index].num);
            count += parseInt(num);
            shop[index].num = count;
        } else {
            shop.push(product);
        }
  
    } else {
        shop = [];
        shop.push(product);
    }
  
    cookie.set('shop', JSON.stringify(shop));
  }
  